<template>

  <a-modal
      centered
      width="95%"
      :visible="runLotsDefeModalVisible"
      @cancel="defeModalCancel"
  >

      <a-row class="yy-Row">
        <!-- 查询条件 -->
        <a-form-model
            layout="inline"
            :model="lotDefeForm"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
        >
          <a-row>
            <a-col :span="6">
              <a-form-model-item :label="$t('menuItem.lotId')" >
                <a-input
                    :disabled ="true"
                    v-model="lotDefeForm.lotId"
                ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item :label="$t('menuItem.ProductId')" >
                <a-input
                    v-model="lotDefeForm.productId"
                    :disabled ="true"
                ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item :label="$t('menuItem.Quantity')" >
                <a-input
                    v-model="lotDefeForm.quantity"
                    :disabled ="true"
                ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item :label="$t('menuItem.comment')" >
                <a-input
                    v-model="lotDefeForm.comment"
                    :disabled ="true"
                ></a-input>
              </a-form-model-item>
            </a-col>

          </a-row>
        </a-form-model>
      </a-row>
    <a-card>
      <a-row >
        <a-col span="4">
          <a-spin :spinning="loading">
            <a-checkbox style="margin: 0 0 1rem 0" :checked="selectAllWafer" @click="clickAll">ALL</a-checkbox>
            <a-row >
              <span :style="getSpanStyle('01')">W01</span>
              <span :style="getSpanStyle('02')">W02</span>
              <span :style="getSpanStyle('03')">W03</span>
              <span :style="getSpanStyle('04')">W04</span>
              <span :style="getSpanStyle('05')">W05</span>
            </a-row>
            <a-row >
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('01')"  id="W01"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('02')" id="W02"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('03')" id="W03"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('04')" id="W04"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('05')" id="W05"></a-button>
            </a-row>
            <a-row >
              <span :style="getSpanStyle('06')">W06</span>
              <span :style="getSpanStyle('07')">W07</span>
              <span :style="getSpanStyle('08')">W08</span>
              <span :style="getSpanStyle('09')">W09</span>
              <span :style="getSpanStyle('10')">W10</span>
            </a-row>
            <a-row >
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('06')" id="W06"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('07')" id="W07"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('08')" id="W08"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('09')" id="W09"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('10')" id="W10"></a-button>
            </a-row>
            <a-row >
              <span :style="getSpanStyle('11')">W11</span>
              <span :style="getSpanStyle('12')">W12</span>
              <span :style="getSpanStyle('13')">W13</span>
              <span :style="getSpanStyle('14')">W14</span>
              <span :style="getSpanStyle('15')">W15</span>
            </a-row>
            <a-row >
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('11')" id="W11"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('12')" id="W12"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('13')" id="W13"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('14')" id="W14"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('15')" id="W15"></a-button>
            </a-row>
            <a-row >
              <span :style="getSpanStyle('16')">W16</span>
              <span :style="getSpanStyle('17')">W17</span>
              <span :style="getSpanStyle('18')">W18</span>
              <span :style="getSpanStyle('19')">W19</span>
              <span :style="getSpanStyle('20')">W20</span>
            </a-row>
            <a-row >
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('16')" id="W16"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('17')" id="W17"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('18')" id="W18"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('19')" id="W19"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('20')" id="W20"></a-button>
            </a-row>
            <a-row >
              <span :style="getSpanStyle('21')">W21</span>
              <span :style="getSpanStyle('22')">W22</span>
              <span :style="getSpanStyle('23')">W23</span>
              <span :style="getSpanStyle('24')">W24</span>
              <span :style="getSpanStyle('25')">W25</span>
            </a-row>
            <a-row >
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('21')" id="W21"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('22')" id="W22"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('23')" id="W23"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('24')" id="W24"></a-button>
              <a-button shape="circle" style="margin-right:10px;margin-bottom: 5px"  :disabled="true" @click="clickWafer('25')" id="W25"></a-button>
            </a-row>
          </a-spin>
        </a-col>
        <a-col span="9">
            <ProMap
                ref="ProMap"
                :mapData="mapData"/>
        </a-col>
        <a-col span="11">
          <span>{{'WaferID:'+chooseWaferId}}</span>
          <a-table
                  size="small"
                  :columns="columns"
                   :dataSource="waferSiteDataSource"
                   :loading="loadTable"
                   :cell-style="{padding:'7px 8px'}"
                   bordered
                   :rowKey="(record,index)=>{return record.key}"
                   :pagination="false"
          >
            <template slot="siteJudgeOk" slot-scope="text, record">
              <a-radio-group v-model="record.siteJudge"  name="radioGroup">
                <a-radio value="1"></a-radio>
              </a-radio-group>
            </template>
            <template slot="siteJudgeNo" slot-scope="text, record">
              <a-radio-group v-model="record.siteJudge"  name="radioGroup">
                <a-radio value="0"></a-radio>
              </a-radio-group>
            </template>

            <template slot="siteLayer" slot-scope="text">
              <span :title="text">{{ getSiteLayer(text) }}</span>
            </template>
            <template slot="siteCode" slot-scope="text">
              <span :title="text">{{ getSiteCode(text) }}</span>
            </template>
            <template slot="operation" slot-scope="text, record">
              <a-button type="primary" v-has="'btn_DieDefeDetail'" @click="DieDefeDetailButton(record)">{{$t('btn.DieDefeDetail')}}
              </a-button>
            </template>
          </a-table>
        </a-col>
      </a-row>
      <a-row >
            <a-form-model
                :model="waferSiteForm"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
            >
              <a-col span="6">
                <a-row style="height: 10px">
                  <a-form-model-item :label="$t('menuItem.AqlStandard')" >
                    <a-input
                        v-model="waferSiteForm.aqlStandard" disabled
                    />
                  </a-form-model-item>
                </a-row>
                <a-row style="height: 10px">
                  <a-form-model-item :label="$t('menuItem.acceptHold')" >
                    <a-input
                        v-model="waferSiteForm.acceptHold" disabled
                    />
                  </a-form-model-item>
                </a-row>
                <a-row style="height: 10px">
                  <a-form-model-item :label="$t('menuItem.defeCnt')" >
                    <a-input
                        v-model="waferSiteForm.defeCnt" disabled
                    />
                  </a-form-model-item>
                </a-row>
                <a-row style="height: 10px">
                  <a-form-model-item :label="$t('menuItem.aqlResult')" >
                    <a-input
                        v-model="waferSiteForm.aqlResult" disabled
                    />
                  </a-form-model-item>
                </a-row>
              </a-col>
              <a-col span="6">

              </a-col>
              <a-col span="12" style="margin-top: 20px">
                <a-row >
                  <a-form-model-item :label="$t('menuItem.front')" >
                    <a-input
                        v-model="waferSiteForm.front"
                    />
                  </a-form-model-item>
                </a-row>
                <a-row >
                  <a-form-model-item :label="$t('menuItem.edge')" >
                    <a-input
                        v-model="waferSiteForm.edge"
                    />
                  </a-form-model-item>
                </a-row>
                <a-row >
                  <a-form-model-item :label="$t('menuItem.backside')" >
                    <a-input
                        v-model="waferSiteForm.backside"
                    />
                  </a-form-model-item>
                </a-row>
              </a-col>
          </a-form-model>
      </a-row>
    </a-card>
    <template  slot="footer">
      <a-button  @click="defeModalCancel">{{ $t('btn.cancel') }}</a-button>
      <a-button type="primary" v-has="'btn_waferSubmit'" :loading="butLoading" @click="waferSubmit">{{ $t('menuItem.waferSubmit') }}</a-button>
      <a-button type="primary"  v-has="'btn_lotSubmit'"   @click="lotSubmit">{{ $t('menuItem.lotSubmit') }}</a-button>
    </template>

  </a-modal>

</template>

<script>
import {mapMutations, mapState} from "vuex";
import ProMap from "../ProductConfig/ProMap";

export default {
name: "RunLotsDefeModal",
  components: {
    ProMap,
  },
  data() {
    return {
      columns: [
        {
          title: "S1-S9",
          dataIndex: 'key',
          key: 'key',
          align: 'center',
          width: 40,
        },
        {
          title: 'OK',
          dataIndex: 'siteJudge',
          key: 'siteJudgeOK',
          align: 'center',
          width: 40,
          scopedSlots: {customRender: 'siteJudgeOk'},
        },
        {
          title: 'NG',
          dataIndex: 'siteJudge',
          key: 'siteJudgeNG',
          align: 'center',
          width: 40,
          scopedSlots: {customRender: 'siteJudgeNo'},
        },
        {
          title: this.$t('menuItem.siteLayer'),
          dataIndex: 'dieLayer',
          key: 'dieLayer',
          align: 'center',
          width: 70,
          scopedSlots: {customRender: 'siteLayer'},
        },
        {
          title: this.$t('menuItem.siteCode'),
          dataIndex: 'dieCode',
          key: 'dieCode',
          align: 'center',
          width: 70,
          scopedSlots: {customRender: 'siteCode'},
        },
        {
          title: this.$t('btn.operation'),
          dataIndex: 'operation',
          key: 'operation',
          align: 'center',
          width: 70,
          scopedSlots: {customRender: 'operation'},
        },
      ],
      pageSize: {
        pageSize: 9,
        size: 'small',
      },

      labelCol: {span: 6},
      wrapperCol: {span: 11},
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
    }
  },
  mounted() {

  },
  computed: {
    ...mapState('JsRunLot', ['lotDefeForm', 'loadTable','waferDefeDataSource','waferSiteDataSource', 'runLotsDefeModalVisible',
      'waferSiteForm','loading','chooseWaferId','dieLayerList','dieCodeList','mapData','selectAllWafer','butLoading']),

    getSiteLayer(){
      return function(text) {
        if (!this.dieLayerList) {
          return text;
        }
        let index = this.dieLayerList.findIndex((e) => text === e.value);
        if (index !== -1) {
          return this.dieLayerList[index].label;
        }
        return text;
      };
    },
    getSiteCode() {
      return function (text) {
        if (!this.dieCodeList) {
          return text;
        }
        let index = this.dieCodeList.findIndex((e) => text === e.value);
        if (index !== -1) {
          return this.dieCodeList[index].label;
        }
        return text;
      };
    }
  },

  methods: {
    ...mapMutations('JsRunLot', ['lotSubmit', 'waferSubmit', 'defeModalCancel','setButtonColor','clickWafer','DieDefeDetailButton', 'clickAll']),

    getSpanStyle(index){
      let wafer = this.waferDefeDataSource.filter(e => e.waferNo === index)[0]
      if (wafer && wafer.retWaferJudgeOVList){
        return {"margin-right" : "12px", "font-weight" : "bold"}
      } else{
        return {"margin-right" : "14px"}
      }
    }
  },

}
</script>

<style scoped>

</style>
